<template>
  <div class="w-full overflow-auto">
    <div class="flex ">
      <div class="px-12 py-5 rounded-4 b-[#ddd] b-solid b-1 h-36 l-h-36 white-space mr-5 c-[#666]" v-for="(item,index) in identityList" :key="index" @click="change(item)" :class="[selectIdentityId === item.id?'active':'']">
        {{ item.name }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
defineProps({
  selectIdentityId: {
    type: [Number, String],
    default: 0
  }
})
const emit = defineEmits(['update:selectIdentityId', 'change'])
const identityList = ref([
  { name: '在职人员', id: 0 },
  { name: '自由职业者', id: 1 },
  { name: '退休人员', id: 2 },
  { name: '在校学生', id: 3 },
  { name: '学龄前儿童', id: 4 }
])
const change = (item) => {
  emit('update:selectIdentityId', item.id)
  emit('change', item.id)
}
</script>

<style lang="scss" scoped>
.active {
  background-color: #3d8ffd;
  color: #fff;
}
</style>